<template>
	<view class="content">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" active-color='#003690' inactive-color='#666666' :current="current"
				@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swipercont" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="itemcont" v-for="i,index in replaceGasList" :key="index">
					<view class="ittime">{{i.createtime_text}}</view>
					<view class="metercont">
						<view class="title">
							换表原因: <text class="pl10">{{i.renewal}}</text>
						</view>
						<view class="flex metelist">
							<view class="metelistcont">
								<view class="titlebold">原气表信息</view>
								<view class="title">气表照片</view>
								<view class="meterimg">
									<template v-for="v,idx in i.gasometer_original_images">
										<image @tap="pre(i.gasometer_original_images,idx)" :src="v" :key="idx"></image>
									</template>
								</view>
								<view class="title">
									品牌: <text class="pl10">{{i.brand_original_text}}</text>
								</view>
								<view class="title">
									气表号: <text class="pl10">{{i.gasometer_original}}</text>
								</view>
								<view class="title">
									气表读数: <text class="pl10">{{i.gasometer_original_number}}</text>
								</view>
								<view class="title">
									剩余气/金额:
									<text class="pl10">{{i.gasometer_original_price}}</text>
								</view>
								<view class="title">
									进气方向: <text class="pl10">{{i.gasometer_original_direction}}</text>
								</view>
							</view>
							<view class="u-line"></view>
							<view class="metelistcont">
								<view class="titlebold">现气表信息</view>
								<view class="title">气表照片</view>
								<view class="meterimg">
									<template v-for="v,idx in i.gasometer_new_images">
										<image @tap="pre(i.gasometer_new_images,idx)" :src="v" :key="idx"></image>
									</template>
								</view>
								<view class="title">
									品牌: <text class="pl10">{{i.brand_new_text}}</text>
								</view>
								<view class="title">
									气表号: <text class="pl10">{{i.gasometer_new}}</text>
								</view>
								<view class="title">
									气表读数: <text class="pl10">{{i.gasometer_new_number}}</text>
								</view>
								<view class="title">
									剩余气/金额:<text class="pl10">{{i.gasometer_new_price}}</text>
								</view>
								<view class="title">
									进气方向: <text class="pl10">{{i.gasometer_new_direction}}</text>
								</view>

							</view>
						</view>
						<!-- <view class="title mt10">
								户内管道试压记录: <text class="pl10">{{i.manometry}}</text>
							</view> -->
						<!-- <view class="title">
								电子签名记录: <text class="pl10">查看电子签名记录</text>
							</view> -->
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="itemcont" v-for="(item,index) in resetList" :key='index'>
					<view class="ittime">{{item.createtime_text}}</view>
					<view class="metercont2">
						<view class="title flex">
							气表照片
							<view class="pl10 tpimage">
								<template v-for="v,idx in item.gasometer_original_images">
									<image @tap="pre(item.gasometer_original_images,idx)" :src="v" :key="idx"></image>
								</template>
							</view>
						</view>
						<view class="title flex">
							品牌
							<text>{{item.brand}}</text>
						</view>
						<view class="title flex">
							气表底数
							<text>{{item.gasometer_original_number}}</text>
						</view>
						<view class="title flex">
							清零前余额
							<text>{{item.gasometer_original_price}}</text>
						</view>
						<view class="title flex">
							工作人员
							<text>{{item.staff_text.realname}}</text>
						</view>
						<view class="title flex">
							清零原因
							<text>{{item.reset_reason}}</text>
						</view>
						<view class="title flex">
							时间
							<text>{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="itemcont" v-for="(item,index) in meterList" :key='index'>
					<view class="ittime">{{item.createtime_text}}</view>
					<view class="metercont2">
						<view class="title flex">
							气表照片
							<view class="pl10 tpimage">
								<template v-for="v,idx in item.images">
									<image @tap="pre(item.images,idx)" :src="v" :key="idx"></image>
								</template>
							</view>
						</view>
						<view class="title flex">
							抄表时间断
							<text>{{item.time}}</text>
						</view>
						<view class="title flex">
							用气天数
							<text>{{item.current_employ_days}}</text>
						</view>
						<view class="title flex">
							每天平均用量
							<text>{{item.current_average}}</text>
						</view>
						<view class="title flex">
							本期气表读数
							<text>{{item.current_reading}}</text>
						</view>
						<view class="title flex">
							气表读数实用数
							<text>{{item.current_employ_number}}</text>
						</view>
						<view class="title flex">
							抄表人
							<text>{{item.staff_text.realname}}</text>
						</view>
						<view class="title flex">
							费用
							<text>{{item.current_cost}}元</text>
						</view>
						<view class="title flex">
							收费状态
							<view style="color: #000000;display: flex;align-items: center;">
								<template v-if="item.is_pay==1">
									待付款 <text class="payPrice" @tap="handleSubmint(item.id)">去付款</text>
								</template>
								<template v-if="item.is_pay==2">
									已付款
								</template>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '气表更换'
				}, {
					name: '气表清零'
				}, {
					name: '工商业抄表'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: 3,
				replaceGasList: [], //气表更换列表
				resetList: [], //气表清零列表
				meterList: [], //工商业抄表
				code:''
			};
		},
		onShow() {
			this.getReplaceGas()
			this.gasReset()
			this.getMeter()
		},
		methods: {
			handleSubmint(id){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				var _this = this
				uni.request({
					url: _this.$url + 'gas.copy_gas_record/copygaspay',
					method:"POST",
					header:{
						token: uni.getStorageSync('token'),
					},
					data:{
						gasid: id
					},
					success: (res) => {
						if (res.data.code == 1) {
							_this.payment(res.data.data)
						} else if (res.data.code == -1) {
							this.getCode()
						} else {
							uni.hideLoading()
							_this.$showToast(res.data.msg)
						}
					}
				})
			},
			payment(parameter) {
				var _this = this 
				uni.hideLoading()
				var data = parameter
				uni.requestPayment({
					provider: 'wxpay',
					appid: data.appId,
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp,
					success: (res) => {
						_this.getMeter()
					},
					fail: (err) => {
						_this.$showToast('支付失败')
					}
				})
			},
			getCode() {
				uni.login({
					success: res => {
						if (res.code) {
							this.code = res.code;
							this.setAppId()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '用户未授权code',
								icon: 'none'
							})
							return;
						}
					},
					fail: res => {
						uni.hideLoading()
						uni.showToast({
							title: '用户授权失败',
							icon: 'none'
						})
						return;
					}
				});
			},
			setAppId() {
				var _this = this
				_this.$request.request({
					url: 'user/getOpenid',
					method: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						code: this.code
					}
				}).then(res => {
					if (res.data.code == 1) {
						_this.handleSubmint()
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			},
			pre(imgs, index) {
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			getReplaceGas() {
				var _this = this
				uni.request({
					url: _this.$url + 'gas.change_gas_record/getList',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'),
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == 1) {
							let arr = res.data.data
							for (let i = 0; i < arr.length; i++) {
								if (arr[i].gasometer_new_images) {
									arr[i].gasometer_new_images = arr[i].gasometer_new_images.split(',')
									arr[i].gasometer_original_images = arr[i].gasometer_original_images.split(
										',')
								}
							}
							_this.replaceGasList = arr
						}
					}
				})
			},
			gasReset() {
				var _this = this
				uni.request({
					url: _this.$url + 'gas.clear_gas_record/getList',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'),
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == 1) {
							for (let i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].gasometer_original_images) {
									res.data.data[i].gasometer_original_images = res.data.data[i]
										.gasometer_original_images.split(',')
								}
							}
							_this.resetList = res.data.data
						}
					}
				})
			},
			getMeter() {
				var _this = this
				uni.request({
					url: _this.$url + 'gas.copy_gas_record/getList',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'),
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == 1) {
							for (let i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].images) {
									res.data.data[i].images = res.data.data[i].images.split(',')
								}
							}
							_this.meterList = res.data.data
						}
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.payPrice{
		display: flex;
		background: #003690;
		padding: 6rpx 10rpx;
		color: #FFFFFF !important;
		margin-left: 10rpx;
		height: 52rpx;
		align-items: center;
		font-size: 24rpx;
	}
	.content {
		background: #F1F1F1;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swipercont {
		flex: 1;

		.swiper-item {
			height: 100%;
			overflow-y: auto;
			padding-bottom: 50rpx;
		}
	}

	.itemcont {
		.ittime {
			text-align: center;
			padding: 30rpx 0;
			color: #999999;
			font-size: 26rpx;

		}

		.metercont {
			width: 94%;
			margin-left: 3%;
			border-radius: 15rpx;
			background: #ffffff;
			padding: 20rpx 30rpx;
			font-size: 28rpx;

			.title {
				padding: 10rpx 0 20rpx 0;
				color: #999999;

				text {
					color: #000000;
				}
				
			}

			.metelist {
				justify-content: space-between;

				.u-line {
					height: 490rpx;
					border-right: 1px solid #e3e3e3;
					margin-top: 20rpx;
				}

				.titlebold {

					color: #003690;
					font-size: 28rpx;
					text-align: center;
				}

				.title {
					height: 60rpx;
					line-height: 60rpx;
					color: #999999;
					display: flex;

					text {
						color: #000000;
					}
				}

				.meterimg {
					height: 110rpx;

					image {
						height: 100rpx;
						width: 100rpx;
						margin: 10rpx 0 0 0;
					}

				}
			}


		}

		.metercont2 {
			width: 94%;
			margin-left: 3%;
			border-radius: 15rpx;
			background: #ffffff;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			margin-bottom: 10rpx;

			.title {
				width: 100%;
				color: #999999;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #f3f3f3;
				display: flex;
				justify-content: space-between;

				text {
					color: #000000;
				}

				.tpimage {

					image {
						height: 60rpx;
						width: 60rpx;
						margin: 10rpx;
					}

				}
			}

			.title:last-child {
				border-bottom: 0;
			}
		}
	}
</style>
